﻿@page "/PlotlyBlazorLineChartTest1"
@inject IJSRuntime jsRuntime

<h3>PlotlyBlazorLineChartTest1</h3>

@using Plotly.Blazor
@using Plotly.Blazor.Traces


<PlotlyChart @ref="plotlyChart" @bind-Data="data"
             @bind-Layout="layout"
             @bind-Config="config" SelectedAction="SelectedAction" RelayoutAction="RelayoutAction" AfterRender="Init" />
<Button Text="Add Data" OnClick="AddPictureData" />

<script src="_content/Plotly.Blazor/plotly-3.0.0.min.js"></script>
<script src="_content/Plotly.Blazor/plotly-interop-6.0.0.js"></script>
<script src="./plotlyInterop.js"></script>

@code {
    protected override async Task OnInitializedAsync()
    {
        config = new Config
        {
            Responsive = true
        };

        layout = new Plotly.Blazor.Layout
        {
            Title = new Plotly.Blazor.LayoutLib.Title
            {
                Text = "可移动矩形的折线图示例",
            },
            Width = 700,
            Height = 700,
            Margin = new Plotly.Blazor.LayoutLib.Margin { T = 50, B = 50, L = 50, R = 50 }, // 压缩边距
        };

        layout.Images = new List<Plotly.Blazor.LayoutLib.Image>();
        data = new List<ITrace>
{
            new Scatter
            {
                Name = "ScatterTrace",
                Mode = Plotly.Blazor.Traces.ScatterLib.ModeFlag.Lines | Plotly.Blazor.Traces.ScatterLib.ModeFlag.Markers,
                X = new List<object>{1,2,3},
                Y = new List<object>{1,2,3}
            }
};
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsRuntime.InvokeVoidAsync("import", "./_content/Plotly.Blazor/plotly-3.0.0.min.js");
        await jsRuntime.InvokeVoidAsync("import", "./_content/Plotly.Blazor/plotly-interop-6.0.0.js");
        if (firstRender)
        {

        }
    }
}
